<template>
	<view class="content">
		<view class="customerList">
			<view class="messageList">
				<label for="" style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">会员手机号：</label>
				<input type="text" v-model="phone" value="" placeholder="请输入会员手机号" style="width: 350rpx;"/>
				<button class="btn-query" @click="queryMember">查询</button>
			</view>
		</view>
		<view class="member-list-title">
			<view class="member-sel">请选择</view>
			<view class="member-nick">会员ID</view>
			<view class="member-time">添加时间</view>
		</view>
		<view>
			<view class="member-list" v-for="(item, index) in members" :key="item.id">
				<view class="member-sel">
					<radio-group @change="selectMember">
						<label>
							<radio :value="item.id" :checked="index === current"/>
						</label>
					</radio-group>
				</view>
				<view class="member-nick">{{item.id}}</view>
				<view class="member-time">{{item.createTime | dateFormat}}</view>
			</view>
		</view>
		<view class="afrim"  @click="saveMember()">添加会员</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import {
		formatDate
	} from '@/common/date';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				phone: null,
				storeId: null,
				members:[],
				currentMemberId:null,
				current: 0
			};
		},
		onLoad(options) {
			let that = this;
			that.storeId = options.storeId;
		},
		filters: {
			dateFormat(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		},
		methods: {
			selectMember(e){
				let that = this;
				let memberId = e.detail.value;
				for(var i = 0; i < that.members.length; i++){
					 if (that.members[i].id === memberId) {
						that.current = i;
						break;
					}
				}
				that.currentMemberId = memberId;
				console.log(that.currentMemberId);
			},
			async queryMember(){
				let that = this;
				let params = {
					phone: that.phone
				}
				let data = await Api.apiCall('GET', Api.member.getMemberByPhone, params);
			    that.members = data;
				that.currentMemberId = that.members[0].id;
			},
			async saveMember() {
				let that = this;
				if(null == that.phone || that.phone == ''){
					uni.showModal({
						title: '提示',
						content: '请先输入手机号查询.',
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {
					
							}
						}
					});
					return false;
				}
				let params = {
					storeId: that.storeId,
					memberId: that.currentMemberId,
				}
				let data = await Api.apiCall('post', Api.member.create, params);
				console.log(data)
				if(data){
					uni.showModal({
						title: '提示',
						content: '已成功保存会员.',
						success: function(res) {
							if (res.confirm) {
							} else if (res.cancel) {
					
							}
						}
					});
				}
			}
		}
	}
</script>

<style>
	.afrim{
		width: 650rpx;
		height: 80rpx;
		background: #0DA944;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: calc(100% - 95%);
		margin-left: 40rpx;
	}
	.customerType {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		vertical-align: top;
		text-align: right;
		padding-right: 30rpx;
		font-size: 30rpx;
	}

	.pickerType {
		width: 540rpx;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	.pickerType view {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.upBox {
		padding: 0 30rpx;
	}

	.upBox text {
		display: inline-block;
		padding: 20rpx 0;
	}

	.messageList {
		margin-top: 10rpx;
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F8F8F8;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}

	.messageList label {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		vertical-align: top;
		text-align: right;
		padding-right: 30rpx;
		font-size: 30rpx;
	}

	.messageList input {
		height: 80rpx;
		vertical-align: top;
		display: inline-block;
		line-height: 80rpx;
		font-size: 28rpx;
	}

	.fan {
		position: relative;
		padding: 30rpx 0;
	}

	.fan button {
		position: absolute;
		top: 30rpx;
		left: 0;
		width: 750rpx;
		height: 480rpx;
		background: none;
		border: none;
	}

	.fanMian {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.fanMian image {
		width: 690rpx;
		height: 480rpx;
	}

	.examTit {
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.examTit text {
		font-size: 24rpx;
		color: #ff1d31;
	}

	.examTit {
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.examTit text {
		font-size: 24rpx;
		color: #ff1d31;
	}

	.fan {
		position: relative;
		padding: 30rpx 0;
	}

	.fan button {
		position: absolute;
		top: 30rpx;
		left: 0;
		width: 750rpx;
		height: 480rpx;
		background: none;
		border: none;
	}

	.fanMian {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.fanMian image {
		width: 690rpx;
		height: 480rpx;
	}
	
	.btn-query{
		background-color: #0DA944;
		color: #FFFFFF;
	}
	
	.member-list-title{
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items: center;
		color: #0DA944;
	}
	
	.member-list{
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items: center;
	}
	
	.member-sel{
		flex: 1;
	}
	
	.member-nick{
		flex: 1;
	}
	
	.member-time{
		flex: 2;
	}
</style>
